<template>
	<view>
		<view class="logo">
			<image
				src='https://haipinche-1255795789.cos.ap-shanghai.myqcloud.com/uploads/20220803/ea0d109c49c6531632694d550a4e94a7.png'>
			</image>
			<text>龙之约</text>
		</view>

		<view class="lable">请允许龙之约拼车获取以下权限</view>
		<view class="text">以下信息仅用于您登陆龙之约拼车，我们将严格保密绝不外泄，更不会对您发送垃圾信息造成骚扰</view>
		<view :class="getUser ? 'lable-active' : 'lable'" style="margin-top:40rpx;">获取您的公开信息（昵称，头像等）</view>
		<view class="text">获取您的公开信息方便您使用全部功能</view>
		<view :class="getPhone ? 'lable-active' : 'lable'" style="margin-top:40rpx;">授权手机号</view>
		<view class="text">获取您的手机号用于注册登陆、实名认证</view>

		<block v-if="!getUser"><button @click="getuserinfo">第一步，获取公开信息</button></block>

		<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" hover-class="button-hover"
			v-if="!getPhone && getUser">第二步，授权手机号</button>
		<button hover-class="button-hover" v-if="getPhone && getUser">登陆中</button>
		<view class="login-tips">
			登录即代表您已同意
			<view class="primary" @click.stop="$tools.to('../agreement/agreement?key=yhxy')">《用户协议》</view>
			<view class="primary" @click.stop="$tools.to('../agreement/agreement?key=ysxy')">《隐私协议》</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				getUser: false,
				getPhone: false,
				userInfo: '',
				openid: '',
				mobile: '',
				pid: ''
			};
		},
		onShow() {
			if (uni.getStorageSync('pid')) {
				this.pid = uni.getStorageSync('pid');
			}
		},
		methods: {
			...mapMutations(['UPDATE_USERINFO']),
			...mapActions(['getUserInfo']),
			async getuserinfo() {
				// 获取用户信息
				console.log('11111');
				let userInfo = await this.$tools.mpGetUserProfile();
				this.userInfo = userInfo.userInfo;
				let code = await this.$tools.mpGetCode();
				this.$api
					.getOpenid({
						code: code.code,
					})
					.then(res => {
						this.$tools.toast(res.msg);
						console.log(res);
						this.openid = res.data.openid;
						this.getUser = true;
					});
				return;
			},
			getPhoneNumber(e) {
				uni.login({
					provider: 'weixin',
					success: loginInfo => {
						console.log(loginInfo, 'loginInfo');
						this.$api
							.getPhoneNumber({
								code: loginInfo.code,
								iv: e.detail.iv,
								encryptedData: e.detail.encryptedData
							})
							.then(res => {
								console.log(res);
								if (res.code == 1) {
									this.mobile = res.data.phoneNumber;
									this.getPhone = true;
									this.login();
								} else {
									uni.showToast({
										title: '获取失败，请重试',
										icon: 'none'
									});
								}
							});
					}
				});
			},
			login() {
				console.log('登录');
				this.$api
					.wechatLogin({
						openid: this.openid,
						nickname: this.userInfo.nickName,
						avatar: this.userInfo.avatarUrl,
						mobile: this.mobile,
						code: this.pid
					})
					.then(res => {
						console.log(res);
						if (res.code == 1) {
							uni.showToast({
								title: '登录成功',
								icon: 'none'
							});
							uni.setStorageSync('userInfo', res.data);
							uni.setStorageSync('token', res.data.token);
							this.UPDATE_USERINFO(res.data)
							this.getUserInfo()
							setTimeout(() => {
								uni.reLaunch({
									url: '../index/index'
								});
							}, 1000);
						} else {
							uni.showToast({
								title: '登录失败，请重试',
								icon: 'none'
							});
						}
					});
			},
		}
	};
</script>

<style lang="scss">
	.logo {
		width: 100%;
		height: 300rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-bottom: 50rpx;
	}

	.logo image {
		width: 120rpx;
		height: 120rpx;
	}

	.logo text {
		font-size: 30rpx;
		color: #474747;
		margin-top: 20rpx;
	}

	.lable {
		width: 90%;
		margin-left: 5%;
		font-size: 30rpx;
		color: #474747;
		font-weight: bold;
	}

	.text {
		width: 90%;
		margin-left: 5%;
		font-size: 26rpx;
		color: #8a8a8a;
		margin-top: 10rpx;
	}

	.lable-active {
		width: 90%;
		margin-left: 5%;
		font-size: 30rpx;
		color: #dbb366;
		font-weight: bold;
	}

	button {
		background: linear-gradient(90deg, #2b2a28, #4b4945);
		color: #fff;
		width: 90%;
		margin-left: 5%;
		margin-top: 100rpx;
		font-size: 30rpx;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.button-hover {
		opacity: 0.6;
		background: #dbb366;
		color: #fff;
	}

	.use-phoneNumber-login {
		width: 90%;
		position: fixed;
		bottom: 20rpx;
		left: 5%;
		margin-top: 50rpx;
		color: #256df2;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.use-phoneNumber-login image {
		width: 100rpx;
		height: 100rpx;
	}

	.use-phoneNumber-login view {
		font-size: 24rpx;
		color: #8a8a8a;
		margin-top: 10rpx;
	}

	.use-phoneNumber-login .blue {
		color: #256df2;
	}

	.login-tips {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #000;
		height: 100rpx;
	}

	.login-tips view {
		color: #256df2;
	}
</style>
